.z-index {
  .container {
    position: relative;
    width: 300px;
    height: 150px;
    margin-top: 20px;
  }

  .box {
    width: 50px;
    height: 50px;
    margin: 10px;
    background-color: #aaa;

    top: 15px;
    left: 15px;

    width: 80px;
    height: 120px;
    position: absolute;
    text-align: center;
    font-family: monospace;
    background-color: #fcfbe5;
    border: solid 5px #e3e0a1;
  }

  .blue {
    width: 80px;
    background-color: #e5e8fc;
    border: solid 2px #112382;
    text-align: center;
    line-height: 20px;
  }

  .red {
    width: 100px;
    background-color: #fce5e7;
    border: solid 2px #e3a1a7;
    text-align: center;
    line-height: 20px;
  }

  .auto {
    z-index: auto;
  }

  .index1 {
    z-index: 1;
  }

  .index2 {
    z-index: 2;
  }

  .index3 {
    z-index: 3;
  }

  .index4 {
    z-index: 4;
  }

  .index5 {
    z-index: 5;
  }

  .index6 {
    z-index: 6;
  }

  .index7 {
    z-index: 7;
  }

  /* 其他定位属性*/
  .position1 {
    position: absolute;
    top: 10px;
    left: 30px;
  }

  .position2 {
    position: absolute;
    top: 25px;
    left: 45px;
  }

  .position3 {
    position: absolute;
    top: 40px;
    left: 60px;
  }

  .position4 {
    position: absolute;
    top: 100px;
    left: 30px;
  }

  .position5 {
    position: absolute;
    top: 115px;
    left: 45px;
  }

  .position6 {
    position: absolute;
    top: 130px;
    left: 60px;
  }
}
